/*
@author: stanfor
@date: 2022/8/28 16:15
@Version: 1.0
@last modify time : 2022/8/28 16:15
*/

import React, { FC, ReactElement } from 'react';
import { Switch, Col, Form, SwitchProps } from 'antd';
import { getRulesConfig, commonInterface } from '@C/base/SFields/constant';
import './index.less';

interface IProps extends commonInterface{
  // 开关子组件放置的方向
  placement: 'top' | 'bottom' | 'left' | 'right';
  children: ReactElement;
}

const className = {
  'top': 'base-component-super-fields-switch-top',
  'bottom': 'base-component-super-fields-switch-bottom',
  'left': 'base-component-super-fields-switch-left',
  'right': 'base-component-super-fields-switch-right',
};

const TopRender: FC<Partial<IProps> & Partial<SwitchProps>> = (props): ReactElement => {
  const {
    name, label = 'switch', placement = 'top', required = false, ruleIcon, formItemConfig,
    checked, style, children, ...switchProps
  } = props;

  return (
    <div
      className={`${className[placement]} base-component-super-fields-common`}
      style={{ marginTop: checked ? -15 : '', ...style }}
    >
      {checked && children}
      <Form.Item
        name={name}
        label={label}
        valuePropName="checked"
        rules={getRulesConfig(required, label, ruleIcon, `未开启${label}`)}
        style={{ paddingTop: checked ? 22 : '' }}
        {...formItemConfig}
      >
        <Switch {...switchProps} />
      </Form.Item>
    </div>
  );
};

const BottomRender: FC<Partial<IProps> & Partial<SwitchProps>> = (props): ReactElement => {
  const {
    name, label = 'switch', placement = 'bottom', required = false, ruleIcon, formItemConfig,
    checked, style, children, ...switchProps
  } = props;
  return (
    <div className={`${className[placement]} base-component-super-fields-common`} style={{...style}}>
      <Form.Item
        name={name}
        label={label}
        valuePropName="checked"
        rules={getRulesConfig(required, label, ruleIcon, `未开启${label}`)}
        {...formItemConfig}
      >
        <Switch {...switchProps} />
      </Form.Item>
      {checked && children}
    </div>
  );
};

const LeftRender: FC<Partial<IProps> & Partial<SwitchProps>> = (props): ReactElement => {
  const {
    name, label = 'switch', placement = 'left', required = false, ruleIcon, formItemConfig,
    checked, style, children, ...switchProps
  } = props;
  return (
    <div className={`${className[placement]} base-component-super-fields-common`} style={{...style}}>
      <div className="base-component-super-fields-switch-left-l">
        {checked && children}
      </div>
      <div className="base-component-super-fields-switch-left-r">
        <Form.Item
          name={name}
          label={label}
          valuePropName="checked"
          rules={getRulesConfig(required, label, ruleIcon, `未开启${label}`)}
          {...formItemConfig}
        >
          <Switch {...switchProps} />
        </Form.Item>
      </div>
    </div>
  );
};

const RightRender: FC<Partial<IProps> & Partial<SwitchProps>> = (props): ReactElement => {
  const {
    name, label = 'switch', placement = 'right', required = false, ruleIcon, formItemConfig,
    checked, style, children, ...switchProps
  } = props;
  return (
    <div className={`${className[placement]} base-component-super-fields-common`} style={{...style}}>
      <div className="base-component-super-fields-switch-right-r">
        <Form.Item
          name={name}
          label={label}
          valuePropName="checked"
          rules={getRulesConfig(required, label, ruleIcon, `未开启${label}`)}
          {...formItemConfig}
        >
          <Switch {...switchProps} />
        </Form.Item>
      </div>
      <div className="base-component-super-fields-switch-right-l">
        {checked && children}
      </div>
    </div>
  );
};

const MatchPlacement: FC<Partial<IProps> & Partial<SwitchProps>> = (props): ReactElement => {
  // value 是被 Form.Item 自带的值，用于控制 Switch，但是引发了 Switch 的 value` is not a valid prop, do you mean `checked`
  // 所以在这里直接断层，不往下传递了
  const { placement = 'bottom', ...switchProps } = props;

  try {
    if (typeof placement !== 'string') {
      throw new Error('unexpected: SSwitch 组件 placement 属性可能需要一个 String 类型');
    }
    switch (placement) {
      case 'top':
        return <TopRender placement={placement} {...switchProps} />;
      case 'bottom':
        return <BottomRender placement={placement} {...switchProps} />;
      case 'left':
        return <LeftRender placement={placement} {...switchProps} />;
      case 'right':
        return <RightRender placement={placement} {...switchProps} />;
      default:
        throw new Error('unexpected: 未找到匹配项, 请检查传入的 placement 字段是否正确');
    }
  } catch (err) {
    console.error(err);
  }
  return <></>;
};

const Index: FC<Partial<IProps> & Partial<SwitchProps>> = (props): ReactElement => {
  const { span = 8, ...switchProps } = props;

  return (
    <Col span={span}>
      <MatchPlacement {...switchProps} />
    </Col>
  );
};

export default Index;
